<script setup>
import { ref, onMounted } from 'vue' // 添加 watch 的导入
import { fetchDailyHotGoodsAPI, fetchWeeklyHotGoodsAPI } from '@/apis/detail'

const props = defineProps({
  categoryId: {
    type: [String, Number],
    default: ''
  },
  brandId: {
    type: [String, Number],
    default: ''
  }
})

// 热门商品数据
const hotList = ref([])
const weeklyHotList = ref([])

// 获取热门商品数据
const getDailyHotList = async () => {
  console.log('开始获取热门商品数据')
  console.log('请求参数:', {
    categoryId: props.categoryId,
    brandId: props.brandId
  })

  try {
    const res = await fetchDailyHotGoodsAPI({
      categoryId: props.categoryId,
      brandId: props.brandId
    })
    console.log('API响应数据:', res)

    // 根据返回的数据结构调整取值方式
    if (res.data.list) {
      // 取前三个商品，并且按照 dailyPopularity 排序
      hotList.value = res.data.list
        .sort((a, b) => b.dailyPopularity - a.dailyPopularity)
        .slice(0, 4)
        .map((item) => ({
          id: item.id,
          name: item.productName,
          desc: item.description,
          price: item.price,
          picture: item.picture
        }))
      console.log('处理后的热门商品列表:', hotList.value)
    }
  } catch (error) {
    console.error('获取热门商品数据失败:', error)
  }
}

// 获取每周热门商品数据
const getWeeklyHotList = async () => {
  try {
    const res = await fetchWeeklyHotGoodsAPI({
      categoryId: props.categoryId,
      brandId: props.brandId
    })

    if (res.data.list) {
      weeklyHotList.value = res.data.list
        .sort((a, b) => b.weeklyPopularity - a.weeklyPopularity)
        .slice(0, 3)
        .map((item) => ({
          id: item.id,
          name: item.productName,
          desc: item.description,
          price: item.price,
          picture: item.picture,
          weeklyPopularity: item.weeklyPopularity
        }))
    }
  } catch (error) {
    console.error('获取每周热门商品数据失败:', error)
  }
}

onMounted(() => {
  //   console.log('GoodsHot组件已挂载')
  getWeeklyHotList()
  getDailyHotList()
})
</script>

<template>
  <div class="goods-hot">
    <!-- 24小时热榜 -->
    <h3>24小时热榜</h3>
    <div class="goods-list">
      <div class="goods-item" v-for="item in hotList" :key="item.id">
        <div class="image">
          <img :src="item.picture" :alt="item.name" />
        </div>
        <div class="info">
          <p class="name">{{ item.name }}</p>
          <p class="desc">{{ item.desc }}</p>
          <p class="price">¥{{ item.price }}</p>
        </div>
      </div>
    </div>

    <!-- 每周热榜 -->
    <h3 class="weekly-title">每周热榜</h3>
    <div class="goods-list">
      <div class="goods-item" v-for="item in weeklyHotList" :key="item.id">
        <div class="image">
          <img :src="item.picture" :alt="item.name" />
        </div>
        <div class="info">
          <p class="name">{{ item.name }}</p>
          <p class="desc">{{ item.desc }}</p>
          <p class="price">¥{{ item.price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.goods-hot {
  h3 {
    height: 35px;
    line-height: 35px;
    margin: 10px 0;
    font-size: 17px;
    font-weight: normal;
  }
  .weekly-title {
    margin-top: 40px; // 添加与上面板块的间距
    height: 35px;
    line-height: 35px;
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: normal;
  }

  .goods-list {
    display: flex;
    justify-content: space-between; // 改用space-between布局
    gap: 15px; // 添加更大的间距
    padding: 0 10px; // 两侧添加内边距

    .goods-item {
      width: calc((100% - 60px) / 3); // 考虑到间隙的宽度计算
      min-width: 200px; // 设置最小宽度

      .image {
        width: 100%;
        height: auto;

        img {
          width: 100%;
          height: 200px;
          object-fit: cover;
        }
      }

      .info {
        padding: 10px 0;

        .name {
          font-size: 15px;
          margin-bottom: 5px;
        }

        .desc {
          font-size: 13px;
          color: #999;
          margin-bottom: 5px;
        }

        .price {
          color: #cf4444;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
